import React, { useState, useEffect } from 'react';
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import { Button, Typography } from 'antd';

// 段落
const { Paragraph } = Typography;
// 定义函数
const ReactLearn: React.FC<{}> = () => {
  // 定义变量
  const [state, setsState] = useState(1);

  useEffect(() => {
    document.title = `增加 ${state} 次`;
  });

  // 返回页面数据
  return (
    <>
      <PageContainer>
        <div>
          <h2>react学习{state}---state的使用</h2>
          <Button onClick={() => setsState(state + 1)}>增加state</Button>
          <span>state增加了{state}</span>
        </div>
        <div>
          <h3>useEffect学习</h3>
          <Paragraph copyable>
            useEffect 做了什么？ 通过使用这个 Hook，你可以告诉 React
            组件需要在渲染后执行某些操作。React
            会保存你传递的函数（我们将它称之为 “effect”），并且在执行 DOM
            更新之后调用它。在这个 effect 中，我们设置了 document 的 title
            属性，不过我们也可以执行数据获取或调用其他命令式的 API。
          </Paragraph>
          <Paragraph copyable>
            为什么在组件内部调用 useEffect？ 将 useEffect
            放在组件内部让我们可以在 effect 中直接访问 count state 变量（或其他
            props）。我们不需要特殊的 API 来读取它 ——
            它已经保存在函数作用域中。Hook 使用了 JavaScript
            的闭包机制，而不用在 JavaScript
            已经提供了解决方案的情况下，还引入特定的 React API。
          </Paragraph>
          <Paragraph copyable>
            useEffect 会在每次渲染后都执行吗？
            是的，默认情况下，它在第一次渲染之后和每次更新之后都会执行。（我们稍后会谈到如何控制它。）你可能会更容易接受
            effect 发生在“渲染之后”这种概念，不用再去考虑“挂载”还是“更新”。React
            保证了每次运行 effect 的同时，DOM 都已经更新完毕。
          </Paragraph>
        </div>
        <FooterToolbar>第一页</FooterToolbar>
      </PageContainer>
    </>
  );
};

// 渲染页面
export default ReactLearn;
